<template>
    <div class="section-form">
        <my-form label-width="140px" v-model="form" @submit="submitHandler" ref="form" labelPosition="top">

            <el-form-item label="招标公告链接地址：" prop="noticeurl" label-width="150px" :rules="newRule('招标公告链接', 'url','required')" style="width: 540px;">
                <el-input v-model="form.noticeurl"></el-input>
            </el-form-item>

            <!-- <h2 class="title">
                <span class="title-req">*</span>服务类型(可多选):
            </h2> -->

            <el-form-item prop="bidtypecode" label="服务类型(可多选):" label-width="200px" :rules="newRule('服务类型', 'required')">
                <my-check v-model="form.bidtypecode" :action="`${$store.state.api.webUrl}/elecbidding/servicelist.json`"
                    :props="{value: 'id', label: 'valuename'}" :amout.sync="sumAmout" :valuename.sync="form.bidtypename" @click="bidtypeChange"></my-check>
            </el-form-item>

            <template v-if="false">
                <el-form-item prop="noticeurl" label-width="0">
                    <my-radio v-model="uploadType" :data="[{key:'mobile', value:'手机扫码上传'},{key:'pc', value:'使用电脑上传'},]"></my-radio>
                </el-form-item>

                <template v-if="uploadType === 'mobile'">
                    <div class="tip-upload-type">
                        <i class="el-icon-warning"></i>
                        在手机端上传资料提交后，该电脑端页面不要关闭，需在该页面进行支付。
                    </div>

                    <div class="qrcode-con">
                        <mobile-qrcode :search="{guid: form.guid, firstshow: 1}"></mobile-qrcode>
                    </div>
                </template>

                <template v-if="uploadType === 'pc'">
                    <el-form-item v-for="(item, index) in formList" :key="index" :label="item.label_name">
                        <template v-if="item.label_type === 'input'">
                            <el-input v-model="item.label_value"></el-input>
                        </template>

                        <template v-if="item.label_type === 'file'">
                            <!-- <my-upload :file-guid="item.label_value" single></my-upload> -->
                            <!-- <DialogUpload ref="uploader" v-model="item.label_value" :data="item" :label_value="item.guid"></DialogUpload> -->

                            <dialog-upload :fileguid="item.label_value" :name="item.label_name" :example="item.examplevalue"
                                :template="item.templatevalue"></dialog-upload>
                        </template>
                    </el-form-item>
                </template>
            </template>

            <template v-slot:btn="scope">
                <div class="footer">
                    <div class="descs">
                        <div class="item">
                            <div class="label">
                                预计完成时间：
                            </div>
                            <div class="value">
                                支付完成后24小时内
                            </div>
                        </div>

                        <div class="item">
                            <div class="label">
                                需支付：
                            </div>
                            <div class="value price">
                                ￥{{sumAmout}}
                            </div>
                        </div>
                        <div class="item">
                            <div class="label2">
                                实际金额需专员评估后给出，相差不会超过20%
                            </div>
                        </div>

                        <div>
                            <input-mobile-yzm v-if="!isLogin" ref="sign" class="mobile-yzm" prompt="此手机号用于平台登录,登录后可以查看订单进度"></input-mobile-yzm>
                        </div>

                    </div>

                    <div class="btns">
                        <el-button type="primary" size="large" @click="scope.submitHandler">
                            提交
                        </el-button>

                        <!-- <div class="info">
                            我已阅读并同意
                            <span @click="dialogVisible = true"> 《{{CONFIG_PROJECT.title}} 电子投标服务提交资料协议》</span>
                        </div> -->
                    </div>
                </div>
            </template>
        </my-form>

        <dialog-clause v-model="dialogVisibleClause" agree @click="agreeHandler" title="电子投标服务协议" type="electronic_bidding"></dialog-clause>

        <dialog-pay ref="payer" @success="paySuccessHandler" @closeNoPay="closeNoPay"></dialog-pay>

    </div>
</template>

<script>
import CONFIG_PROJECT from '@config/project';
import DialogClause from '@components/sys/dialog-clause';
import DialogPay from '../components/dialog-pay.vue';
import MobileQrcode from '../components/mobile-qrcode.vue';
import myCheck from '../components/my-check.vue';
import DialogUpload from '../components/dialog-upload.vue';
import Chain from '../../../../components/my-components/upload-s/assets/js/Chain';

export default {
    props: {
        isLogin: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        DialogClause,
        DialogPay,
        MobileQrcode,
        myCheck,
        DialogUpload,
    },
    data() {
        return {
            caTypes: [],

            amount: 0,
            sumAmout: 0,

            form: {
                bidtypecode: '',
                bidtypename: '',
                noticeurl: '',
            },

            uploadType: '', // 上传方式

            dialogVisibleClause: false,

            formList: [],
            uploadData: {},
            CONFIG_PROJECT,
            dialogVisible: false,
            typeTime: false, //节流
        };
    },
    methods: {
        submitHandler() {
            new Chain()
                .link((next) => {
                    if( this.isLogin){
                        next();
                    } else{
                        this.$refs.sign.login(() => {
                            next();
                        });
                    }
                })
                .link((next) => {
                    this.dialogVisibleClause = true;
                })
                .run();
        },
        agreeHandler() {
            new Chain()
                .link((next) => {
                    this.dialogVisibleClause = false;
                    next();
                })
                .link((next) => {
                    // this.paySuccessHandler();
                    this.cdkeyHandler();
                })
                .run();
        },
        paySuccessHandler() {
            this.$emit('update');

            this.formList = [];

            this.form = {
                bidtypecode: '',
                bidtypename: '',
                noticeurl: '',
            };
            this.uploadData = {};
            if(!this.isLogin){
                window.location.reload();
            }
        },
        // // 提交表单
        cdkeyHandler() {
            this.$post(
                `${this.$store.state.api.webUrl}/elecbidding/edit.json`,
                {
                    ...this.form,
                    list: this.formList,
                },
                (data) => {
                    //提交成功，调用支付
                    showMsg('添加成功', 'success');

                    // 调起支付
                    // this.$refs.payer.initHandler(data);
                    this.paySuccessHandler();
                },
                true
            );
        },

        //未支付成功
        closeNoPay() {
            showMsgBox('检测到您取消支付，在个人中心可以查看到此订单，半个小时内可继续完成支付');
        },

        bidtypeChange() {
            this.$refs.form.$refs['form'].validateField('bidtypecode');
            return;

            if (this.typeTime) return;
            this.typeTime = true;

            let time = setTimeout(() => {
                this.initFirstInfo();
                this.typeTime = false;
            }, 360);
        },

        initFirstInfo() {
            let that = this;
            new Chain()
                .link((next) => {
                    // 获取要完善的附件信息
                    this.$get(
                        `${this.$store.state.api.webUrl}/elecbidding/biddingdetail.json`,
                        {
                            guid: this.form.bidtypecode,
                            firstshow: 1,
                        },
                        (data) => {
                            this.formList = data;

                            next();
                        }
                    );
                })
                .link((next) => {
                    // 初始提交
                    if (!this.form.bidtypecode) {
                        return;
                    }
                    this.$post(
                        `${this.$store.state.api.webUrl}/elecbidding/add.json`,
                        {
                            bidtypecode: this.form.bidtypecode,
                            bidtypename: this.form.bidtypename,
                            list: this.formList,
                        },
                        (data) => {
                            var projectids = data;
                            this.form.guid = projectids;

                            next();
                        },
                        true
                    );
                })
                .run();
        },

        //获取选项
        getType() {
            this.$get(`${this.$store.state.api.webUrl}/elecbidding/servicelist.json`, (data) => {
                console.log(data);
            });
        },
    },
    mounted() {},
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';

.section-form {
    padding: 30px 30px 0;
    border: solid 1px #dcdcdc;
    box-sizing: border-box;

    h2 {
        font-size: 20px;
        color: #252525;
        line-height: 1em;
        margin-bottom: 32px;
    }

    h3 {
        font-size: 16px;
        color: #252525;
        line-height: 1em;
        margin: 20px 0;
    }
    .title-req {
        font-size: 14px;
        font-weight: none;
        color: #ef4040;
        margin-right: 4px;
    }
    ::v-deep .el-form-item--small .el-form-item__label {
        line-height: 32px;
        font-weight: 600;
    }

    .title-label {
        display: flex;
        line-height: 1em;
        margin-bottom: 18px;

        .main {
            font-size: 14px;
            color: #252525;
        }

        .sub {
            font-size: 14px;
            color: #838383;
        }
    }

    .tip-upload-type {
        color: $warningColor;
        font-size: 12px;
        margin-bottom: 1em;
    }

    .footer {
        background-color: #f9fbff;
        margin: 20px -30px -20px;
        padding: 20px 30px;

        .descs {
            margin-bottom: 20px;

            .item {
                display: flex;
                color: #252525;
                font-size: 16px;
                line-height: 1em;

                & + .item {
                    margin-top: 20px;
                }

                .label {
                }
                .label2 {
                    color: #838383;
                }

                .value {
                    &.price {
                        font-size: 18px;
                        color: #ef2424;
                    }
                }
            }
        }

        .btns {
            ::v-deep {
                .el-button {
                    padding-left: 70px;
                    padding-right: 70px;
                }
            }
        }
    }
}

.qrcode-con {
    width: 500px;
}
.mobile-yzm {
    margin-top: 20px;
    margin-bottom: 20px;
}
</style>